body,html{
  overflow: hidden;
}

.app{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


.tool-bar{
  display: flex;
  flex-direction: row-reverse;
  height:40px;
  line-height: 40px;
  background-color: #333;
  color:#f7f7f7;
  font-size: large;
}

.tool-bar>div{
  margin:auto 10px;
}


.tool-bar>div>label{
  margin-right: 5px;
}

.result{
  width:100%;
  height:calc(100vh - 41px);
  border-top:1px solid #eee;
}

.stdin,.stdout{
  width:100vw;
  height: calc(100% - 40px);
  background:#fff;
}


.stdin>textarea, .stdout>textarea{
  width:calc(100vw - 12px);
  height: calc(100% - 10px);
  min-height: 100px;
  margin:0 0px;
  padding:0 5px;
  padding-top:10px;
  border:0;
  color:#333;
  background:#f7f7f7;
}


*::-webkit-scrollbar{
  /*滚动条整体样式*/
  width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 2px;
  box-shadow   : inset 0 0 5px rgba(223, 222, 222, 0.2);
  background   : #d8d8d8;
}

*::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  /* border-radius: 2px; */
  background   : #3d3d3d;
  }

.stdin,.stdin>textarea{
  background-color: #fff;
  color:#000;
}

.stdout,.stdout>textarea{
  background-color: #000;
  color:#fff;
}

/* 解决手机端 文字颜色问题 */
.stdout>textarea:disabled{
  opacity: 1;
  -webkit-text-fill-color: #fff;
}


.stdin>textarea:focus{
  outline: none !important;
}

.tabs{
  position: relative;
  display: flex;
  box-shadow:0px 5px 5px 0px #00000033;
  z-index: 1;

  /* 电脑端禁止选中文本 */
  -moz-user-select:none; /*火狐*/
  -webkit-user-select:none; /*webkit浏览器*/
  -ms-user-select:none; /*IE10*/
  -khtml-user-select:none; /*早期浏览器*/
  user-select:none;

  /* 移动端禁止选中文本 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tabs>div{
  height:30px;
  line-height: 30px;
  cursor: pointer;
  padding:5px 20px;
}

.tabs>div.run-code{
  margin:auto 10px;
  margin-left:50px;
  padding-left:20px;
  padding-right: 20px;
  background: rgb(13, 174, 248);
  color:#fff;
  height:20px;
  line-height: 20px;
  border-radius: 10px;
}

.run-code:hover{
  background: rgb(110, 202, 245);
}

.loading{
  background:#00000099;
  position:absolute;
  width:100vw;
  height:100vh;
  z-index: 100;
}

.loading>.ani{
  position: relative;
  top:calc(50vh - 32px);
  left:calc(50vw - 32px);
}


.links>a{
  color:#fff;
  text-decoration: none;
  margin:auto 10px;
}

@media screen and (max-width: 600px) {
  .links>a{
    display: none;
  }
}